<!--
 * @Author: songxinfeng
 * @Date: 2024-12-30
 * @Description: CRM系统Logo组件，体现“易客通”内涵
-->
<template>
  <div class="logo-container">
    <svg class="logo-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#5DADE2;" />
          <stop offset="100%" style="stop-color:#3498DB;" />
        </linearGradient>
      </defs>

      <!-- 流动的外环，代表“通” -->
      <path
        d="M 50,10 A 40,40 0 1 1 25,25"
        fill="none"
        stroke="url(#logoGradient)"
        stroke-width="10"
        stroke-linecap="round"
      />
      <path
        d="M 50,90 A 40,40 0 1 1 75,75"
        fill="none"
        stroke="#FFFFFF"
        stroke-width="10"
        stroke-linecap="round"
        opacity="0.8"
      />

      <!-- 中心的“客” -->
      <circle cx="50" cy="50" r="12" fill="#FFFFFF"/>

    </svg>
    <span class="logo-text">易客通</span>
  </div>
</template>

<style scoped>
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.logo-icon {
  width: 48px;
  height: 48px;
}

.logo-container:hover {
  opacity: 0.85;
}

.logo-text {
  font-size: 24px;
  font-weight: 600;
  color: #ecf0f1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>